<template>
  <div>
    <HETTable1
      ref="portStatusTable"
      :tableData="data.tableData"
      :tHead="data.tHead"
      :total="data.total"
      :size="data.total"
      @getTableData="getPortStatusList"
    >
      <template #icon>
        <el-table-column :width="40">
          <template #default="scope">
            <div class="imgWarp">
              <img v-if="scope.row.enable" :title="treeStore.osType == 'win' ? '放行' : '拦截'" :src="treeStore.osType == 'win' ? img1 : img2" width="15" />
              <img :title="treeStore.osType == 'win' ? '拦截' : '放行'" v-if="!scope.row.enable" :src="treeStore.osType == 'win' ? img2 : img1" width="15" />
            </div>
          </template>
        </el-table-column>
      </template>
      <template #enable>
        <el-table-column :label="treeStore.osType == 'win' ? '拦截' : '授信'">
          <template #default="scope">
            <el-switch
              v-model="scope.row.enable"
              :active-value="0"
              :inactive-value="1"
              :disabled="scope.row.system === 1"
              :loading="loading"
              @change="changeEnable(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
      </template>
    </HETTable1>
  </div>
</template>

<script setup>
import img1 from "~/assets/images/deploy@2x.png";
import img2 from "~/assets/images/noActivedeploy.png";
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useTreeStore } from "~/utils/pinia/tree.js";
import { req_getPortStatus, req_disableFirewallConfig } from "~/utils/axios/index.js";
const treeStore = useTreeStore();
const portStatusTable = ref();
treeStore.treeLinkedTableRef = portStatusTable;
const data = reactive({
  tHead: [
    {
      label: "icon",
      prop: "icon",
      isCustom: true,
      slotName: "icon",
    },
    {
      label: "开放端口",
      prop: "port",
      isCustom: false,
      //width: 200,
    },
    {
      label: "程序",
      prop: "portName",
      isCustom: false,
      //width: 200,
      osType: "win",
    },
    {
      label: "路径",
      prop: "path",
      isCustom: false,
    },
    {
      label: "进程ID",
      prop: "pid",
      isCustom: false,
      osType: "win",
    },
    {
      label: "拦截",
      prop: "enable1",
      isCustom: true,
      slotName: "enable",
      osType: "win",
    },
    {
      label: "授信",
      prop: "enable2",
      isCustom: true,
      slotName: "enable",
      osType: "linux",
    },
  ],
  tableData: [],
  total: null,
  initForm: {
    direction: 2,
    ruleType: 0,
    protocol: 0,
    remotePortType: 0,
    remotePort: "",
    localPortType: 0,
    localPort: "",
    localAddressType: 0,
    localAddress: "",
    remoteAddressType: 0,
    remoteAddress: "",
    desc: "",
    priority: 5,
    ruleName: "",
    operate: 0,
    enable: 1,
  },
});
onMounted(() => {});
const changeEnable = (row) => {
  let initData = JSON.parse(JSON.stringify(data.initForm));
  if (row.enable) {
    initData.priority = row.priority;
    initData.operate = 1;
    initData.enable = 1;
  } else {
    // 解除
    initData.operate = 0;
    initData.enable = 0;
    initData.priority = row.priority;
  }
  initData.localPortType = 1;
  initData.localPort = row.port.toString();
  initData.desc = row.path;
  addRule(initData);
};
const loading = ref(false);
const addRule = (data) => {
  data.ruleName = getRulename(data);
  loading.value = true; // 开关显示加载中
  req_disableFirewallConfig(treeStore.treeDeviceId, data)
    .then((res) => {
      loading.value = false;
      res.data.succeed ? ElMessage.success("操作成功") : 'ElMessage.error("操作失败")';
      portStatusTable.value.getTableData();
    })
    .catch((err) => {
      loading.value = false;
    });
};
const getRulename = (data) => {
  let protocol;
  if (data.protocol === 0) {
    protocol = "All";
  } else if (data.protocol === 1) {
    protocol = "TCP";
  } else if (data.protocol === 2) {
    protocol = "TCP";
  }
  let localports;
  if (data.localPortType === 0) {
    localports = "All";
  } else {
    localports = data.localPort;
  }
  let remoteports;
  if (data.remotePortType === 0) {
    remoteports = "All";
  } else {
    remoteports = data.remotePort;
  }
  return `${protocol}-${localports}-${remoteports}`;
};
const getPortStatusList = async (initTableParams, $filter) => {
  if (!treeStore.treeDeviceId) return;
  portStatusTable.value.loading(); // 表格加载开始
  try {
    const { data: res } = await req_getPortStatus(treeStore.treeDeviceId);
    portStatusTable.value.finish(); // 表格加载完成
    loading.value = false; // 停止开关的加载状态
    data.tableData = res.data || [];
    data.total = res.total || 0;
  } catch (err) {
    portStatusTable.value.finish(); // 表格加载完成
    loading.value = false;
  }
};
</script>

<style lang="scss" scoped></style>
